<template>
    <div>
        <div class="mySelf">
            <div class="mySelf-top">
                <van-icon name="arrow-left" @click="$router.go(-1)" />
                <span>个人信息</span>
            </div>
            <div class="mySelf-container">
                <span>头像</span>
                <van-icon class="icon" name="arrow" />
            </div>
            <img src="https://cdn2.zzzmh.cn/wallpaper/origin/0c0f3f16880511ebb6edd017c2d2eca2.jpg/thumbs?auth_key=1660492800-875d533129a7ebacecf1b276e5f64224-0-5b8ab0c3e8da9c883ceae99a3ff3c9c2"
                alt="">
            <div class="mySelf-container" @click="tan(0)">
                <span>昵称</span>
                <span>{{ value }}</span>
                <van-icon class="icon" name="arrow" />
            </div>
            <div class="mySelf-container" @click="tan(1)">
                <span>性别</span>
                <span>{{ sex }}</span>
                <van-icon class="icon" name="arrow" />
            </div>
            <div class="mySelf-container" @click="tan(2)">
                <span>生日</span>
                <span>{{ times }}</span>
                <van-icon class="icon" name="arrow" />
            </div>
        </div>
        <van-popup v-model="show" round position="right"
            :style="{ width: '100%', height: '50%', display: 'flex', 'align-items': 'center', 'justify-content': 'center' }">
            <van-field v-if="filed[0]" v-model="value" label="昵称" placeholder="请输入用户名" />
            <van-picker @confirm="onConfirm" v-if="filed[1]" title="性别" show-toolbar :columns="columns" />
            <van-datetime-picker v-if="filed[2]" @confirm="confirms" v-model="currentDate" type="date" title="选择年月日"
                :min-date="minDate" :max-date="maxDate" />
        </van-popup>
        <van-button block @click="commit" class="van-button" type="primary" size="large"
            style="margin: 100px auto;width: 300px;">确定
        </van-button>
    </div>
</template>

<script>
import { formatDateTime } from '@/utils/derevion.js'
import { checkUser } from '../request/api/user.js'
export default {
    name: 'mySelf',
    data() {
        return {
            show: false,
            value: '',
            value1: '',
            value2: '',
            filed: [false, false, false],
            columns: ['男', '女'],
            minDate: new Date(1990, 0, 1),
            maxDate: new Date(2022, 10, 1),
            currentDate: new Date(2022, 8, 2),
            sex: '',
            times: ''
        }
    },
    methods: {
        async commit() {
            let res = await checkUser({
                avatar: 'https://crush__822.gitee.io/photo--black/photo/pict/p1.jpg',
                nickname: this.value,
                sex: this.sex,
                birthday: this.times,
                uid: localStorage.getItem('user_id')
            });
            if (res.data.msg == '更新成功') {
                this.$toast(res.data.msg);
                this.$router.go(-1);
            } else {
                this.$toast(res.data.msg);
            }
        },
        tan(e) {
            this.filed.fill(false);
            this.filed[e] = true;
            this.show = !this.show;
        },
        onConfirm(value) {
            this.sex = value;
            this.show = false;
        },
        confirms(value) {
            this.times = formatDateTime(value);
        }
    }
}
</script>

<style lang="less" scoped>
.mySelf {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .mySelf-top {
        width: 100%;
        height: 60px;
        background: rgb(7, 193, 96);
        color: #fff;
        padding-left: 10px;
        display: flex;
        align-items: center;


        span {
            margin-left: 50%;
            transform: translateX(-50px);
        }
    }

    .mySelf-container {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .icon,
        span {
            padding: 0 10px;
        }
    }

    img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: fixed;
        top: 68px;
        right: 50px;
    }
}
</style>